<template>
    <div class="paymentStop1">
        <header>
            <van-nav-bar title="嗨购收银台">
                <template #left>
                    <van-icon name="arrow-left" @click="$router.back()" size="20" color="black" />
                </template>
            </van-nav-bar>
        </header>
        <nav>
            <div class="price"><h2><i>¥</i>{{ allPrice }}.00</h2></div>
            <div class="time">
                <p>支付时间剩余:</p>
                <van-count-down :time="time">
                    <template #default="timeData">
                        <span class="block" size="12">{{ timeData.hours }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.minutes }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.seconds }}</span>
                    </template>
                </van-count-down>
            </div>
        </nav>
        <main>
            <van-radio-group v-model="radio">
            <div class="list">
                <van-icon name="wechat-pay" color="rgb(9,187,7)" size="30" />
                <div class="textInfo">
                    <h3>微信支付</h3>
                    <p class='van-ellipsis'>仅安装微信6.0.2 及以上版本客户端使用</p>
                </div>
                <van-radio name="1"/>
            </div>
            <div class="list">
                <van-icon name="alipay" color="rgb(7 146 187)" size="30" />
                <div class="textInfo">
                    <h3>支付宝支付</h3>
                    <p class='van-ellipsis'>仅安装支付宝6.0.2 及以上版本客户端使用</p>
                </div>
                <van-radio name="2"/>
            </div>
            </van-radio-group>
        </main>
        <footer>
            <van-button type="primary" :round="true" @click="confirm" color='linear-gradient(to right, #ff6034, #ee0a24)' block>确认支付</van-button>
        </footer>
    </div>
</template>
<style lang="stylus" scoped>
.paymentStop1
    display flex
    flex-direction column
    background-color #f5f5f5
    flex 1
    main
        flex 1
        .list
            display flex
            align-items center
            height 4.375rem
            padding 0 1.25rem
            background-color white
            border-radius .625rem
            justify-content space-between
            margin-top .9375rem
            .textInfo
                flex 1
                display flex
                flex-direction column
                width 15.3125rem
                margin 0 .625rem
                h3
                    font-size .875rem
                p
                    font-size .75rem
                    color #808080
    nav
        height 8.125rem
        display flex
        flex-direction column
        justify-content center
        align-items center
        .price
            color red
            font-size 1.125rem
            i
                font-style normal
                font-size 1.125rem
        .time
            padding .625rem 0
            display flex
            height 1.25rem
            align-items center
            p
                font-size .875rem
                color #1a1a1a
                margin-right .3125rem
    footer
        background-color white
        padding .625rem 1.25rem
        border-radius .625rem .625rem 0 0
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}
.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
}
</style>
<script>
import Vue from 'vue'
import { CountDown, Button, Icon, RadioGroup, Radio } from 'vant'
Vue.use(CountDown)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Radio)
Vue.use(RadioGroup)
export default {
  data () {
    return {
      time: 1000 * 60 * 60 * 24,
      radio: '1',
      timeid: '',
      orderList: [],
      allPrice: 0
    }
  },
  methods: {
    timeData () {
    },
    confirm () {
      this.$router.push({ name: 'paymentStop2', params: { radioId: this.radio, allPrice: this.allPrice, timeid: this.timeid } })
    }
  },
  mounted () {
    this.allPrice = this.$route.params.allprice
    this.timeid = this.$route.params.timeid
  }
}
</script>
